<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <!-- div>h1+p>span+strong>i -->
  <!--
    emmet 语法规则
       > 父子关系 例如 div>p 表示div里面有一个p标签 例如 div>p*2 表示div里面有两个p标签
       + 同级关系 例如 div>h1+p 表示div里面有一个h1标签，后面跟着一个p标签
       * 数量关系 例如 div>p*2 表示div里面有两个p标签
       . 类名 例如 div>p.class 表示div里面有一个类名为class的p标签
       # id名 例如 div>p#id 表示div里面有一个id为id的p标签
       ^ 兄弟关系 例如 div>h1+p+ul 表示div里面有一个h1标签，后面跟着一个p标签和一个ul列表
       () 分组 例如 (div>h1)+(p>span) 表示有两个分组，第一个分组是一个div里面有一个h1标签，第二个分组是一个p里面有一个span标签
       [] 属性 例如 div[title="hello"] 表示div里面有一个标题为"hello"的标签
       {} 文本内容 例如 div>p{这是一个段落} 表示div里面有一个p标签，里面的文字是"这是一个段落"
       @ 递增 例如 div>p.item-@{1..3} 表示div里面有三个类名为"item-1"、"item-2"、"item-3"的p标签
       $ 文本内容 例如 div>p{$} 表示div里面有一个p标签，里面的文字是"$","$"后面的数字会递增
       ! 注释 例如 div>p{这是一个段落} 表示div里面有一个p标签，里面的文字是"这是一个段落"
       & 重复分组 例如 div>(h1>p)+(ul>li) 表示div里面有一个h1标签，里面有一个p标签，后面跟着一个ul列表

      div>h1+p+ul>li*3 生成一个div，里面有一个h1标签，后面跟着两个p标签和一个ul列表
      div>h1+p*2  生成一个div，里面有一个h1标签，后面跟着两个p标签
      div>h1+p*2>span 生成一个div，里面有一个h1标签，后面跟着两个p标签，每个p标签里都有一个span
      div>h1+p*2>span.class#id  生成一个div，里面有一个h1标签，后面跟着两个p标签，每个p标签里都有一个span
      div>h1+p*2>(span.class#id)+strong 生成一个div，里面有一个h1标签，后面跟着两个p标签，每个p标签里都有一个span和一个strong
  -->
  <div>
    <h1></h1>
    <p>
      <span></span>
      <strong>
        <i></i>
      </strong>
    </p>
  </div>


  
</body>
</html>